<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { useTheme } from '@/hooks/theme/theme.js'
import useSettingsStore from '@/store/modules/settings.js'

const { setTheme, toggleDarkMode } = useTheme()
const theme = {
  primary: '#1677ff',
  success: '#52c41a',
  warning: '#faad14',
  danger: '#ff4d4f',
  info: '#1677ff',
}
const local = zhCn
const settingStore = useSettingsStore()

settingStore.$subscribe((mutation, state) => {
  toggleDarkMode(!!state.isDark)
})

onMounted(() => {
  setTheme(theme)
})
</script>

<template>
  <el-config-provider
    :locale="local"
    :button="{
      autoInsertSpace: true,
    }"
    :message="{
      grouping: true,
      plain: true,
    }"
  >
    <router-view />
  </el-config-provider>
</template>
